<template>
	<div class="text-center">
		<BookList :books="show_books" if_no="The Resource was Not Fount"></BookList>
	</div>
</template>

<script>
	import BookList from '../components/BookList.vue'
	
	export default {
		data() {
			return {
				books: [],
				show_books: []
			}
		},
		created() {
			// 获取所有的图书
			this.axios.get('/search',{
				params:{
					'pageNum': '1',
					'pageSize': '10'
				}
			})
			.then((response) => {
				if (response.status == 200){
					this.books = response.data.data;
					this.checkout_books()
				}else{
					console.log(response.status)
				}
			})
			.catch((err) => {
				console.log(err)
			});
		},
		watch: {
			wd() {
				this.checkout_books()
			}
		},
		computed: {
			wd() {
				return this.$route.query.wd
			}
		},
		methods: {
			// 筛选匹配的图书
			checkout_books() {
				this.show_books = [];
				for (let book of this.books) {
					let have = book.title.toLowerCase().indexOf(this.$route.query.wd);
					if (have != -1) {
						this.show_books.push(book)
					}
				}
			}
		},
		components: {
			BookList
		}
	}
</script>

<style>
</style>
